<template>
  <div class="app-container">
    <treeselect
    style="width: 200px"
      name="demo"
      :multiple="multiple"
      :clearable="clearable"
      :searchable="searchable"
      :disabled="disabled"
      :open-on-click="openOnClick"
      :open-on-focus="openOnFocus"
      :clear-on-select="clearOnSelect"
      :close-on-select="closeOnSelect"
      :always-open="alwaysOpen"
      :append-to-body="appendToBody"
      :options="options"
      :limit="3"
      :max-height="200"
      v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      options: [
        {
          id: 10,
          label: "肉类",
          children: [
            {
              id: 11,
              label: "猪肉"
            },
            {
              id: 12,
              label: "牛肉"
            }
          ]
        },
        {
          id: 20,
          label: "水果",
          children: [
            {
              id: 21,
              label: "苹果",
              children: [
                {
                  id: 211,
                  label: "青苹果"
                },
                {
                  id: 212,
                  label: "红苹果11111111111111111"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    changeSelect() {},
    inputChange() {}
  }
};
</script>

<style>
</style>
